<template>
  <div class="content">
    <div class="button" @click="success">成功</div>
    <div class="button" @click="warning">警告</div>
    <div class="button" @click="error">错误</div>
  </div>
</template>

<script setup lang="ts">
const { proxy } = getCurrentInstance() as any
const message = proxy.$message

const success = () => {
  message.success('提交成功', 2, () => {
    console.log('2秒之后调用此函数')
  })
}

const warning = () => {
  message.warning('警告消息')
}

const error = () => {
  message.error('发生错误！')
}
</script>

<style scoped lang="scss">
.content {
  display: flex;
  > * {
    margin: 0 10px;
  }
}

.button {
  border: 1px solid #000;
  padding: 4px 15px;
  border-radius: 4px;
  cursor: pointer;
}
</style>
